<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/find.css">
    <title>团购APP发现</title>
</head>
<body>
        <header class="clearfix">
                <div class="back fl">
                    <button>Back</button>
                </div>
                <div class="dizhi fr">
                    <select name="" id="">
                        <option value="">广州市</option>
                        <option value="">深圳市</option>
                    </select>
                </div>
                <div class="fenlei">
                    <p>发现</p>
                </div>
                <div class="searchBar">
                        <input id="srk" type="text" placeholder="请输入商品名称">
                        <input type="image" src="./img/syimg/fangdajing.png">
                    </div>
        
            </header>
            <div id="main">
                <div class="sous">
                        
                        <p>大家都在搜</p>
                       <table border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                            <td><a href="Product details.html">寿司</a></td>
                            <td><a href="">羽毛球</a></td>
                            <td><a href="">火锅</a></td>
                            <td><a href="">游泳馆</a></td>
                        </tr>
                        <tr>
                            <td><a href="">电影</a></td>
                            <td><a href="Product details.html">周黑鸭</a></td>
                            <td><a href="">KTV</a></td>
                            <td><a href="Product details.html">肯德基</a></td>
                        </tr>
                       </table>

                </div>
                <div class="msl">
                        <div>
                            <img src="img/fximg/fire.png" alt="">
                            <p>热门搜索</p>
                        </div>
                        <div>
                            <p>更多</p>
                           <img src="img/flimg/icon2.png" alt=""> 
                        </div>
                        
                </div>
                <div class="rmss">
                    <a href="Product details.html"><img src="img/fximg/food6.jpg" alt=""></a>
                    <a href="Product details.html"><img src="img/fximg/food7.jpg" alt=""></a>
                    <a href="Product details.html"><img src="img/fximg/food8.jpg" alt=""></a>
                    <a href="Product details.html"><img src="img/fximg/food9.jpg" alt=""></a>
                </div>
                <div class="msl">
                        <div>
                            <img class="wjx" src="img/fximg/star.png" alt="">
                            <p>推荐搜索</p>
                        </div>
                        <div>
                            <p>更多</p>
                           <img src="img/flimg/icon2.png" alt=""> 
                        </div>
                        
                </div>
                <div class="tjss clearfix">
                    <a class="fl" href=""><img src="./img/fximg/zhouheiya.jpg" alt=""></a>
                    <a href=""><img src="./img/fximg/badminton.jpg" alt=""></a>
                    <a class="fr" href=""><img src="./img/fximg/pofeng.jpg" alt=""></a>
                   
                </div>


            </div>



            <footer>
                    <ul class="clearfix">
                       <li class="fl">
                            <a href="index.html"><img src="img/flimg/11_03.png" alt=""></a>
                            <p>首页</p>
                        </li>
                       <li class="fl">
                                    <a href="classification.html"><img src="img/syimg/class.png" alt=""></a>
                                    <p>分类</p>
                           </li>
                            <li class="fl">
                                    <a href="find.html"><img src="img/fximg/fx000_16.png" alt=""></a>
                                    <p>发现</p>
                            </li>
                            <li class="fl">
                                    <a href="My.html"><img src="img/syimg/person.png" alt=""></a>
                                    <p>我的</p>
                            </li>
                
                        </ul>
            </footer>
            <script>
                    
                        
                            document.body.style.height = window.innerHeight + "px";
                        
                            /*动态改变根元素字体大小*/
                            function recalc() {
                                // 获取客户端宽度
                                var clientWidth = document.documentElement.clientWidth;
                                if(!clientWidth) return;
                                // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
                                document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';
                                
                            }
                            // 初始化计算rem
                            function initRecalc() {
                                
                                recalc();
                                // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
                                var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
                                if(!document.addEventListener) return;
                                window.addEventListener(resizeEvt, recalc, false);
                                document.addEventListener('DOMContentLoaded', recalc, false);
                            }
                            initRecalc();
                                
                                
                                
                     </script>       

    
</body>
</html>